<template>
  <el-form
    v-if="rules"
    ref="form"
    class="value-inputer-field"
    :model="form"
    :rules="formRules"
  >
    <el-form-item prop="curValue">
      <slot></slot>
    </el-form-item>
  </el-form>
  <div
    v-else
    class="value-inputer-field"
  >
    <slot></slot>
  </div>
</template>
<script>
import { watch } from 'vue';
import { mapState, mapMutations } from 'vuex';
export default {
  components: {},
  inject: {
    addChild: {
      default: () => {},
    },
  },
  props: {
    form: Object,
    rules: Array,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      saveAllDataProcess: state => state.VisualComponentsModule.saveAllDataProcess,
    }),
    formRules() {
      return {
        curValue: this.rules,
      };
    },
  },
  watch: {
    'saveAllDataProcess.isChecking'(isChecking) {
      if (isChecking && this.rules && this.$store) {
        this.$refs.form.validate((valid, obj) => {
          if (!valid) {
            this.setSaveAllDataErr(obj);
          }
        });
      }
    },
  },
  mounted() {
    if (this?.addChild) {
      this.addChild(this.$refs.form);
    }
  },
  methods: {
    ...mapMutations(['setState', 'setSaveAllDataErr']),
  },
};
</script>
<style lang="less" scoped>
.value-inputer-field {
  width: 100%;
  :deep(.el-form-item) {
    margin-bottom: 0;
    .el-input--suffix {
      .el-input__inner {
      }
    }
    .el-form-item__content {
      line-height: normal;
    }
    .el-form-item__error {
      position: relative;
      margin-top: 5px;
      white-space: normal;
      word-break: break-word;
    }
  }
}
</style>
